<div class="parent-container" admin-parent-data>
  <div class="am-cf am-padding">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">Parent</strong> / <small>Item</small></div>
      </div>

      <div class="am-g">
        <div class="am-u-sm-12 am-u-md-6">
          <div class="am-btn-toolbar">
            <div class="am-btn-group am-btn-group-xs">
              <button type="button" class="am-btn am-btn-default" data-am-modal="{target: '#add-parent-modal', closeViaDimmer: 0, width: 400, height: 500}"><span class="am-icon-plus"></span> Add</button>
              <button type="button" class="am-btn am-btn-default" admin-edit-parent><span class="am-icon-edit"></span> Edit</button>
              <button type="button" class="am-btn am-btn-default" admin-delete-parent><span class="am-icon-trash-o"></span> Delete</button>
            </div>
          </div>
        </div>
        <div class="am-u-sm-6 am-u-md-2">
          <div class="am-form-group parent-page-list">
            <select id="page-size">
              <option value="10">10</option>
              <option value="20">20</option>
              <option value="50">50</option>
              <option value="All">All</option>
            </select>
          </div>
        </div>
        <div class="am-u-sm-12 am-u-md-3">
          <div class="am-input-group am-input-group-sm parent-filter">
            <input type="text" class="am-form-field search-parent" ng-keyup="searchparents($event)" ng-model="search">
            <span class="am-input-group-btn">
              <button class="am-btn am-btn-default" type="button">Search</button>
            </span>
          </div>
        </div>
      </div>

      <div class="am-g">
        <div class="am-u-sm-12">
            <table class="am-table am-table-striped am-table-hover " id="parent-table">
              <thead>
                <tr>
                  <th class="table-check"></th>
                  <th class="table-id">UserId</th>
                  <th class="table-title">Name</th>
                  <th class="table-title">Email</th>
                  <th class="table-title">SessionRestrictions</th>
                  <th class="table-set">Operation</th>
                </tr>
            </thead>
            <tbody>
              <tr ng-repeat="parent in parents.result">
                <td class="select-column"><input type="checkbox" name="select-single-parent" class="select-single-record" ng-click="selectSingleRecord($event)"/></td>
                <td class="parentId">{{parent.userId}}</td>
                <td class="parentItemName">{{parent.name}}</td>
                <td class="parentSku">{{parent.emailAddress}}</td>
                <td class="childSessionCount">
                   <a ng-click="editallowSessionCount(parent)">{{parent.allowSessionCount}}</a>
                </td>
                <td>
                  <div class="am-btn-toolbar">
                    <div class="am-btn-group am-btn-group-xs">
                       <button class="am-btn am-active-status" id="parent-accountState" ng-class="parent.accountState==1?
                        'am-btn-success':'am-btn-danger'" ng-click="setUserId(parent)">
                      <span class="activeCodeActive"  ng-bind="parent.accountState==1?' Disable ':'Enable'"></span>
                    </button>  
                    <button class="am-btn am-active-status"  id="parent-enableDebug" ng-class="parent.enableDebug == true?
                        ' am-btn-success ':'am-btn-danger'" ng-click="setUserId(parent)">
                      <span class="activeCodeActive" ng-bind="parent.enableDebug == true?'Disable Debug':'Enable Debug'"></span>
                    </button>
                        <button class="am-btn am-btn-default am-btn-xs am-text-secondary parent-edit" ng-click="edit(parent)"><span class="am-icon-pencil-square-o"></span> Edit</button>
                      <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only add-child" ng-click="setUserId(parent)"> add child</button>
                    </div>
                  </div>
                </td>
              </tr> 
             
            </tbody>
          </table>
            <div class="am-cf">
              Total <span class="parent-total-record">0</span> records
        <div class="am-fr">
          <ul class="am-pagination parent-pager-container">
          </ul>
        </div>
        </div>
     <hr />
       <p>Attention</p>
     </div>
  </div>
</div>

<!--    mission child modal   -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="child-modal" data-parent-add-chid>
  <div class="am-modal-dialog">
    <div class="am-modal-hd">
      Add child
      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
    </div>
    <div class="am-u-sm-12">
     <div class="am-modal-bd ">
       <form class="am-form" id="add-quest-form" data-am-validator>
      <fieldset>
        <div class="am-form-group">
          <label for="name">Name：</label>
          <input type="text" name="name" minlength="3"  ng-model="quest.name" required/>
        </div>
         <div class="am-form-group">
          <label for="name">Birthday：</label>
         
          <input type="text" name="birthday" minlength="1"  class="am-form-field" id="my-end-2" placeholder="" data-am-datepicker="{theme: 'success',locale: 'en_US',autoClose: 'true'}" ng-model="birthday"  required/>
        </div>

        <div class="am-form-group">
          <label for="questDescription">ChildGender:</label>
          <input type="number" name="childGender" minlength="1"  ng-model="childGender" required/>
        </div>

        <div class="am-form-group">
          <label for="questObjects">Age</label>
          <input type="number" name="age" minlength="1"  ng-model="age" required/>
        </div>
        <button class="am-btn am-btn-secondary" ng-click="addChild()" >Add</button>
      </fieldset>
    </form>
    </div>
  </div>
</div>